import React, {
    Component
} from 'react'
import {
    StyleSheet,
    View,
    Dimensions,
    Switch,
    Image,
    Text,
    TouchableOpacity,
    ScrollView,
    Platform
} from 'react-native'
import { MtContainer, MtChar,  MtNavBar, MtScreen } from 'martian-ui';
import CircleView from '../../components/CircleView';
import BoxShadowYaGuan from '../../components/common/BoxShadowYaGuan';
import NavigationBar from '../../components/common/NavigationBar'

const { width, height } = Dimensions.get('window');
const { MtW1, MtW3, MtL3, MtLabel } = MtChar;
const WINDOW_WIDTH = MtScreen.width;
const WINDOW_HEIGHT = MtScreen.height;

class NightLight extends Component {
    constructor(props) {
        super(props)
        // 初始状态
        this.state = {
            value: false,
        }

    }
    render() {
        const {navigator} =this.props;
        const {value} = this.state;
        return(
            <MtContainer>
                <NavigationBar
                  title={'夜灯'}
                  statusBar={{backgroundColor: '#F4F4F4', barStyle: 'dark-content'}}
                  navigator={navigator}
                  style={{backgroundColor: '#F4F4F4'}}
                />

                <ScrollView style={{flex: 1}}>
                    <View style={{alignItems: 'center' }}>
                        <View style={{alignItems: 'center', paddingTop: 55, paddingBottom: 90}}>
                            <TouchableOpacity
                                onPress={()=>{
                                    this.setState({value: !this.state.value});
                                }}
                            >
                                <Image source={value ? require('../../img/light_on@3x.png') : require('../../img/light_off@3x.png') } style={styles.iconStyle}/>
                            </TouchableOpacity>
                        </View>

                        <BoxShadowYaGuan
                            containerStyle={{ marginBottom: 10}}
                            width={width-30}
                            height={68}
                            renderItem={()=>{
                              return (
                                <View style={styles.power}>
                                  <Text style={styles.powerText}>开关</Text>
                                  <Switch
                                      value={this.state.value}
                                      onTintColor='#00A5AD'
                                      onValueChange={(value)=>{
                                        this.setState({value})
                                      }}
                                  />
                                </View>
                              )}
                            }
                        />
                    </View>
                </ScrollView>

            </MtContainer>
        )

    }

}

export default NightLight

const styles = StyleSheet.create({
    subtitle:{
        fontWeight: 'bold',
        alignItems:'center', // 必须设置,否则换行不起作用
        paddingVertical: 40,
        paddingLeft: 20,
    },
    plusDelBtn1:{

        fontWeight: 'bold',

        alignItems: 'center',
        fontSize: 24,
        marginRight: 25,

    },
    plusDelBtn2:{
        marginLeft: WINDOW_WIDTH/2 + 10,
        fontWeight: 'bold',
        alignItems: 'center',

        fontSize: 24

    },
    iconStyle:{
        width:150,
        height:164,
    },

    buttonContainer: {
        flex: 1,
        marginRight: 10,
        alignItems: 'flex-end',
    },
    powerText: {
      fontSize: 14,
      fontWeight: 'bold',
      color: '#333333',
      flex:1,
    },
    power: {
        height: 68,
        width: width - 30,
        backgroundColor: '#fff',
        borderRadius: 6,
        flexDirection:'row',
        alignItems: 'center',
        flex:1,
        paddingLeft: 20,
        paddingRight: 20,
    },
})
